// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件，否则报错
import Home from "@/pages/Home.vue";
import About from "@/pages/About.vue";
import Message from "@/pages/Message.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/Detail.vue";

// 创建一个路由器。其中VueRouter是一个构造函数
const router = new VueRouter({
    routes: [
        {
            name: 'about', // 命名路由
            // 一级路由
            path: "/about", // 如果访问的/about路径，就访问的是About组件
            component: About,
        },
        {
            name: 'home', // 命名路由
            // 一级路由
            path: "/home", // 如果访问的是/home路径，就访问的是Home组件
            component: Home,
            // 二级路由
            children: [
                {
                    name: 'news', // 命名路由
                    // 如果是二级路由的话，其中path里面的路径前面不需要加/，而vue框架会自动将/添加上去
                    path: "news",
                    component: News,
                },
                {
                    name: 'message', // 命名路由
                    path: "message",
                    component: Message,
                    // 三级路由，一般最多不会超过六级路由
                    children: [
                        {
                            name: 'detail', // 命名路由
                            // 路由可以携带 params 参数，其中:xxx就是占位符
                            path: "detail/:id/:content/:origin/:author/:category",
                            component: Detail,
                            // props写法一【使用少，写的数据是模拟数据】：props的第一种写法，值为对象。其中props谁接受写到谁那里去。
                            // 该对象中的所有key-value都会以props的形式传递给Detail组件。
                            // props: {
                            //     a: 1,
                            //     b: 'hello',
                            // }

                            // props写法二：值为布尔值，如果布尔值为真的话，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
                            // props: true,

                            // props写法三，函数写法，可以省略:function。其中该函数是一个回调函数，写到此处之后，vue会帮助调用
                            // props: function ($route) {
                            //     return {
                            //         id: $route.params.id,
                            //         content: $route.params.content,
                            //         origin: $route.params.origin,
                            //         author: $route.params.author,
                            //         category: $route.params.category,
                            //
                            //         // 其中如果是使用query传参的话，就使用$route.query，如果是使用params传参的话，就使用$route.params
                            //         // id: $route.query.id,
                            //         // content: $route.query.content,
                            //         // origin: $route.query.origin,
                            //         // author: $route.query.author,
                            //         // category: $route.query.category,
                            //     }
                            // }

                            // props写法三的解构赋值
                            // props: function ({params}) {
                            //     return {
                            //         // 其中如果是使用query传参的话，就使用$route.query，如果是使用params传参的话，就使用$route.params
                            //         id: params.id,
                            //         content: params.content,
                            //         origin: params.origin,
                            //         author: params.author,
                            //         category: params.category,
                            //     }
                            // }

                            // props写法三的解构赋值，是解构赋值的连续写法
                            props: function ({params: {id, content, origin, author, category}}) {
                                return {
                                    // 其中如果是使用query传参的话，就使用$route.query，如果是使用params传参的话，就使用$route.params
                                    id: id,
                                    content: content,
                                    origin: origin,
                                    author: author,
                                    category: category,
                                }
                            }
                        }
                    ]
                }
            ]
        },
    ]
})

// 暴露VueRouter
export default router;

